<template>
  <a-layout-header class="custom-header">
    <div class="container">
      <Avatar class="Ava" />
      <Dropdown class="Drop" />
    </div>
  </a-layout-header>
</template>

<script setup>
import Dropdown from "../views/Dropdown.vue";
import Avatar from "../views/Avatar.vue";
</script>

<style>
.custom-header {
  background-color: brown;
  padding: 0;
  position: relative;
  /* display: flex; */
  /* justify-content: space-around; */
  /* align-items: center; */
}
.container {
  width: 150px;
  height: 100%;
  padding: 0;
  position: absolute;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  top: 0;
  right: 20px;
}
.Ava {
  width: 30px;
  height: 30px;
  display: inline-block;
  position: absolute;
  top: 24%;
  left: -5px;

}
.Dorp {
  display: inline-block;
}
</style>
